<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>libdatachannel media sender example</title>
</head>
<body>

<p>Please enter the offer provided to you by the sender application: </p>
<textarea cols="80" rows="25"></textarea>
<button>Submit</button>

<video id="video-element" muted></video>

<script>
    document.querySelector('button').addEventListener('click',  async () => {
        const offer = JSON.parse(document.querySelector('textarea').value);
        const pc = new RTCPeerConnection({
            // Recommended for libdatachannel
            bundlePolicy: 'max-bundle',
        });

        pc.onicegatheringstatechange = (state) => {
            if (pc.iceGatheringState === 'complete') {
                // We only want to provide an answer once all of our candidates have been added to the SDP.
                const answer = pc.localDescription;
                document.querySelector('textarea').value = JSON.stringify({"type": answer.type, sdp: answer.sdp});
                document.querySelector('p').value = 'Please paste the answer in the sender application.';
                alert('Please paste the answer in the sender application.');
            }
        }

		pc.ontrack = (evt) => {
			const videoElement = document.getElementById('video-element');
			videoElement.srcObject = evt.streams[0];
			videoElement.play();
		};

        await pc.setRemoteDescription(offer);

        const answer = await pc.createAnswer();
        await pc.setLocalDescription(answer);
    })
</script>

</body>
</html>
